<template>
  <div id="ssm-header" @click="hideBFunc()">
    <div class="header_line">
      <router-link to="/welcome">
        <img id="home_img" src="@/assets/images/home.png" />
      </router-link>&nbsp;
      <span>Sealer Ssm Platform</span>

      <div class="right_menu">
        <div class="menu_nav">
          <a href="javascript:void(0)" id="nav_flow" @click.stop="toggleB()">
            <img src="@/assets/images/user_ico.png" />
            <span v-if="Object.keys(this.username).length == 0">guest</span>
            <span v-if="Object.keys(this.username).length != 0">{{this.username}}</span>
            <img src="@/assets/images/arrow_down_ico.png" />
          </a>
        </div>

        <div id="b" :class="{'hideB': hideB}">
          <ul>
            <li>
              <a class="b_a" href="passwordModify">
                <P>
                  <i class="fa fa-lock"></i>
                </P>
                <span>修改密码</span>
              </a>
            </li>

            <li>
              <a class="b_a" @click="logout()">
                <P>
                  <i class="fa fa-power-off"></i>
                </P>
                <span>退出系统</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HeaderBar",
  data() {
    return {
      hideB: true
    };
  },

  props: ["username"],
  methods: {
    logout: function() {
      this.$api.login
        .logout()
        // 成功返回 -- status:200, 非000000返回码皆在response拦截器处理掉
        .then(res => {
          if (!res) {
            return;
          }

          // 清除用户数据
          localStorage.removeItem("user.name");
          localStorage.removeItem("user.menus");

          // 正确逻辑处理
          this.$router.push("/");
        });
    },
    toggleB: function() {
      this.hideB = !this.hideB;
    },
    hideBFunc: function() {
      this.hideB = true;
    }
  }
};
</script>

<style scoped>
li {
  list-style: none;
}
#ssm-header {
  width: 100%;
  /* margin-left: -25px; */
}

.header_line {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
  font-size: 27px;
  color: #fff;
}

.header_line #home_img {
  vertical-align: middle;
  margin-bottom: 11px;
  /* padding-right: 10px; */
}

/* data_mart.css */
.right_menu {
  float: right;
  margin-right: 20px;
  margin-top: 42px;
  position: relative;
  z-index: 10;
  top: -26px;
}

.menu_nav {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #fff;
  text-align: right;
}

.menu_nav a {
  color: #fff;
}

.menu_nav font {
  padding: 0 5px;
  text-align: center;
}

.menu_nav img {
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

#b {
  position: absolute;
  z-index: 50;
  width: 246px;
  top:30px;
  right: -20px;
  background: #fff;
  line-height: 30px;
  /* padding: -30px -30px; */
  border-radius: 4px;
  /* margin-top: 10px; */
  font-size: 12px;
  float: left;
}

#b li {
  float: left;
  margin: 0 12px;
  margin-bottom: 10px;
}

.hideB {
  display: none;
}

#b li a {
  color: #333;
  float: left;
  padding: 10px 5px;
}

#b li a:hover {
  background: #19a2fb;
  color: #fff;
  border-radius: 4px;
}

.b_a p {
  margin: 0;
  text-align: center;
  font-size: 20px;
}
</style>